<template>
  <div class="auth-product partDetailsBoxs">
    <el-container class="partDetails">
      <!-- 列表 -->
      <el-header>
        <tabs
          :tabs-arr="tabSliceList"
          @returnIndex="tabsHandle" />
      </el-header>
      <div v-if="activeIndex === 0">
        <RecordInfo
          :record-form="recordFormDetail"
          :record-data="headerInfo">
          <template v-slot:recordInfoslot="slotProp">
            <div
              class="solt-info"
              v-if="activeIndex === 0">
              <span class="left-span">
                采购产品总数
                <span class="right-span">{{ headerInfo.prodTotalCount }}</span>
              </span>
              <span>
                品种数
                <span>{{ headerInfo.prodTypeCount }}</span>
              </span>
              <span>
                金额合计 (元):
                <span>
                  <span class="price">{{ Number(headerInfo.orderAmount).toFixed(3) }}</span>
                </span>
              </span>
            </div>
          </template>
        </RecordInfo>
        <el-editable
          class="hospital-edit-box"
          :data="getList"
          height="400"
          v-loading="tableLoading"
          :columns="partDetailsTableData"
        >
          <template
            slot="default-registrationNumber"
            slot-scope="scope">
            <div>
              <cell-registration
                :key="scope.row.registrationNumber"
                :regis-no="scope.row.registrationNumber"
                :content="'注册证已过期，点击查看详细信息'"
                :status="scope.row.isNoExpire"
                :regis-data="scope.row.registrationInfo"
              />
            </div>
            <!-- <el-button
              :disabled="!scope.row.registrationNumber||!scope.row.registrationId"
              v-html="regisNoButton(scope.row)"
              @click="showPdfRegistion(scope.row.registrationId)"
              type="text"
            /> -->
          </template>
        </el-editable>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="totalElements"
        />
      </div>
      <div v-if="activeIndex === 1">
        <RecordInfo
          :record-form="reciveDetailInfo"
          :record-data="headerInfo" />
        <div
          v-for="(item,index) in deliveryDetailList"
          :key="index">
          <div class="order-list-info">
            <span>
              收货单号
              <span>{{ item.receiveCode }}</span>
            </span>
            <span>
              收货时间
              <span>{{ item.receiveTime }}</span>
            </span>
            <span>
              收货人
              <span>{{ item.receiver }}</span>
            </span>
          </div>
          <div class="order-list-info">
            <span>
              收货产品总数
              <span class="recive-count add-color">{{ item.receiveCount }}</span>
            </span>
            <span>
              品种数
              <span class="add-color">{{ item.receiveTypeCount }}</span>
            </span>
            <span>
              金额合计 （元）
              <span class="add-price">{{ Number(item.receiveTotalAmount).toFixed(3) }}</span>
            </span>
          </div>
          <el-editable
            class="hospital-edit-box"
            :data="item.receiveProductList.content"
            height="400"
            v-loading="tableLoading"
            :columns="receiptDetailsTable"
          >
            <template
              slot="default-receivedCount"
              slot-scope="scope">
              <el-button
                @click="showReciveInfoDialog(scope.row,1)"
                type="text"
              >{{ scope.row.receivedCount }}</el-button>
            </template>
            <template
              slot="default-refuseCount"
              slot-scope="scope">
              <el-button
                @click="showReciveInfoDialog(scope.row,2)"
                type="text"
              >{{ scope.row.refuseCount }}</el-button>
            </template>
            <template
              slot="default-registrationNumber"
              slot-scope="scope">
              <div>
                <cell-registration
                  :key="scope.row.registrationNumber"
                  :regis-no="scope.row.registrationNumber"
                  :content="'注册证已过期，点击查看详细信息'"
                  :status="scope.row.isNoExpire"
                  :regis-data="scope.row.registrationInfo"
                />
              </div>
              <!-- <el-button
                :disabled="!scope.row.registrationNumber||!scope.row.registrationId"
                v-html="regisNoButton(scope.row)"
                @click="showPdfRegistion(scope.row.registrationId)"
                type="text"
              /> -->
            </template>
          </el-editable>
          <el-pagination
            align="right"
            class="pagination"
            @size-change="reciveHandleSizeChange($event,index)"
            @current-change="reciveHandleCurrentChange($event,index)"
            :current-page="pageList[index].curPage"
            :page-sizes="pageList[index].PAGE_NUMBER"
            :page-size="pageList[index].pageSize"
            :layout="pageList[index].PAGINATION_LAYOUT"
            :total="item.receiveProductList.totalElements"
          />
        </div>
      </div>

    </el-container>
    <el-dialog
      :title="isRejection?'拒收记录':'收货记录'"
      width="1200px"
      :visible.sync="dialogPopupVisible"
      @close="closeDialog"
      class="dialog-info"
    >
      <el-editable
        :data="dialogReciveGetOne"
        v-loading="tableLoading"
        :columns="dialogReceiptDetailsTable"
      >
        <template
          slot="default-registrationNumber"
          slot-scope="scope">
          <div>
            <cell-registration
              :key="scope.row.registrationNumber"
              :regis-no="scope.row.registrationNumber"
              :content="'注册证已过期，点击查看详细信息'"
              :status="scope.row.isNoExpire"
              :regis-data="scope.row.registrationInfo"
            />
          </div>
          <!-- <el-button
            :disabled="!scope.row.registrationNumber||!scope.row.registrationId"
            v-html="regisNoButton(scope.row)"
            @click="showPdfRegistion(scope.row.registrationId)"
            type="text"
          /> -->
        </template>
      </el-editable>
      <el-editable
        :data="dialogReciveInfoList"
        height="400"
        v-loading="tableLoading"
        :columns="reciveTableInside"
        class="center-table"
      />

      <el-pagination
        align="right"
        class="pagination"
        @size-change="dialogHandleSizeChange"
        @current-change="dialogHandleCurrentChange"
        :current-page="dialogPage.curPage"
        :page-sizes="dialogPage.PAGE_NUMBER"
        :page-size="dialogPage.pageSize"
        :layout="dialogPage.PAGINATION_LAYOUT"
        :total="dialogPage.totalElements"
      />
    </el-dialog>
    <follow-goods
      :is-show-follow-goods-list="isShowFollowGoodsList"
      :follow-goods-list-data="FollowGoodsListData"
      :role-type="roleType"
      :settle="settle"
      @cancelDialog="cancelDialog"
    />
  </div>
</template>

<script>
import {
  partDetailsTableData,
  receiptDetailsTable,
  detailTabsArr,
  recordFormDetail,
  reciveDetailInfo,
  reciveTableInside,
  statusArr,
  dialogReceiptDetailsTable
} from './const'
import { getCertificate } from '@const/productCenterApiV2'
import tabs from '@components/tabs/index.vue'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import RecordInfo from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/record'
import { attrItemList } from '@const/orderCenterApi'
import {
  hospitalWscPurchaseOrderListInfo,
  hospitalwscPurchaseOrderDetail,
  hospitalWscPurchaseOrderReceiveListById,
  hospitalWscPurchaseOrderReceiveSweepRecord,
  wscSaleOrderPeerList
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import CellRegistration from '@/moduleComponents/common/detail/cell-registration'
import { cloneDeep, isObject, hasIn } from 'lodash'
import { getFormatterPrice } from '@const/filter'
import followGoods from '@/moduleComponents/beforeSettle/followGoodsNote'
export default {
  components: { ElEditable, tabs, RecordInfo, followGoods, CellRegistration },
  data () {
    return {
      // 表格Loading
      tableLoading: false,
      // 表头
      partDetailsTableData,
      // 表格数据
      getList: [],
      recordFormDetail,
      // 表单 详情展示内容-table
      // 部分收货表格
      receiptDetailsTable,
      // 详情tab
      detailTabsArr,
      dialogReceiptDetailsTable,
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0, // 总共的条数
      deliveryDetailList: [],
      activeIndex: 0,
      reciveDetailInfo,
      dialogPopupVisible: false,
      reciveTableInside,
      // 订单详情信息
      headerInfo: {},
      // 收货信息列表页码组合
      pageList: [],
      // 弹框页码组合
      dialogPage: {
        curPage: 1,
        PAGE_NUMBER,
        PAGINATION_LAYOUT,
        pageSize: PAGE_NUMBER[0],
        totalElements: 0
      },
      // 点击弹框则把当前列表数据带过去
      dialogReciveGetOne: [],
      // 暂时存储收货明细id，关闭时则重置
      dialogReceiveDetailId: '',
      // 弹框收货信息详情列表
      dialogReciveInfoList: [],
      isRejection: false,
      isShowFollowGoodsList: false,
      FollowGoodsListData: [],
      roleType: 1,
      settle: 1 // 1-结算前，2-结算后
    }
  },

  mounted () {
    let status = Number(this.$route.query.status)
    let arr = []
    if (status === 3 || status === 4 || status === 5) {
      arr = [
        { type: 'button', val: '返回', handle: this.back },
        { type: 'primary', val: '查看随货同行单', handle: this.lookFollowGoodsNote }
      ]
    } else {
      arr = [
        { type: 'button', val: '返回', handle: this.back }
      ]
    }
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.getOrderInfo()
    if (
      Number(this.$route.query.status) === 4 ||
      Number(this.$route.query.status) === 5
    ) {
      this.getOrderreciveInmation()
    }
  },
  filters: {
    getFormatterPrice
  },
  computed: {
    tabSliceList () {
      if (
        Number(this.$route.query.status) !== 4 &&
        Number(this.$route.query.status) !== 5
      ) {
        let detailTabsArr = cloneDeep(this.detailTabsArr)
        detailTabsArr[1].disabled = true
        return detailTabsArr
      } else {
        let detailTabsArr = cloneDeep(this.detailTabsArr)
        return detailTabsArr
      }
    }
  },
  methods: {
    // 查看随货同行单
    lookFollowGoodsNote () {
      this.$axios
        .$post(wscSaleOrderPeerList, {
          purchaseOrderId: this.headerInfo.purchaseOrderId,
          saleOrderId: this.headerInfo.saleOrderId,
          roleType: this.roleType // 登录角色（1-医院 2-配送商)
        })
        .then(res => {
          let data = res.payload || []
          // 如果有多个随货同行单，就弹框让其选择
          // 如果只有一个，直接弹出
          if (data.length > 0) {
            this.FollowGoodsListData = data
            this.isShowFollowGoodsList = true
          } else {
            this.$message({
              type: 'warning',
              message: '此订单还没有随货同行单！'
            })
          }
        })
    },
    cancelDialog () {
      this.isShowFollowGoodsList = false
    },
    // 获取订单信息
    getOrderInfo () {
      this.$axios({
        method: 'post',
        url: hospitalwscPurchaseOrderDetail,
        data: {
          page: this.curPage,
          pageSize: this.pageSize,
          purchaseOrderId: this.$route.query.id,
          orderType: 1
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        for (let key in obj) {
          if (key !== 'purchaseProductList') {
            if (!obj[key] && key !== 'orderAmount') {
              obj[key] = `--`
            }
            if (key === 'orderStatus') {
              obj[key] = statusArr[obj[key]]
            }
            this.$set(this.headerInfo, [key], obj[key])
          } else if (key === 'purchaseProductList') {
            this.getList = obj[key].content
            this.totalElements = obj[key].totalElements
          }
        }
        this.tableLoading = false
      })
    },
    showPdfRegistion (id) {
      this.$axios({
        method: 'get',
        url: getCertificate,
        params: {
          id: id
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        let url = obj.pictureUrl
        if (!url) {
          this.$message({
            type: 'warning',
            message: '获取失败，请在产品管理中维护该产品的注册证信息'
          })
        } else {
          this.$pdfViewer({ url, title: '注册证pdf预览' })
        }
      })
    },
    // 获取收货信息
    getOrderreciveInmation () {
      this.$axios({
        method: 'post',
        url: hospitalWscPurchaseOrderListInfo,
        data: {
          page: 1,
          pageSize: 20,
          orderType: 1,
          purchaseOrderId: this.$route.query.id
        }
      }).then(res => {
        let arr = hasIn(res, 'data.payload') ? res.data.payload : []
        this.deliveryDetailList = arr
        this.pageList = this.deliveryDetailList.map(item => {
          return {
            curPage: 1, // 当前页
            PAGE_NUMBER, // 页码数组
            PAGINATION_LAYOUT, // 页码功能布局
            pageSize: PAGE_NUMBER[0] // 一页的数量
          }
        })
      })
    },
    // 收货信息列表其中某一个页码更改或更改页面触发
    getReciveInfoById (index) {
      this.$axios({
        method: 'post',
        url: hospitalWscPurchaseOrderReceiveListById,
        data: {
          page: this.pageList[index].curPage,
          pageSize: this.pageList[index].pageSize,
          receiveId: this.deliveryDetailList[index].receiveId,
          orderType: 1
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        let content = obj.content
        this.deliveryDetailList[index].receiveProductList.content = content
      })
    },
    // 点击收货产品数量显示弹框
    showReciveInfoDialog (data, num) {
      if (num === 2) {
        this.isRejection = true
      } else {
        this.isRejection = false
      }
      this.dialogPopupVisible = true
      this.dialogReciveGetOne.push(data)
      this.dialogReceiveDetailId = data.receiveDetailId
      this.getReciveInfo(num)
    },
    // 点击收货信息显示收货信息弹框详情
    getReciveInfo (num) {
      this.$axios({
        method: 'post',
        url: hospitalWscPurchaseOrderReceiveSweepRecord,
        data: {
          page: this.dialogPage.curPage,
          pageSize: this.dialogPage.pageSize,
          receiveDetailId: this.dialogReceiveDetailId,
          orderType: 1,
          checkStatus: num
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        let content = obj.content
        this.dialogPage.totalElements = obj.totalElements
        this.dialogReciveInfoList = content
      })
    },

    regisNoButton (data) {
      if (data.registrationNumber && !data.registrationId) {
        return data.registrationNumber
      } else if (data.registrationNumber && data.registrationId) {
        return data.registrationNumber
      } else if (!data.registrationNumber && data.registrationId) {
        return '暂无注册证号'
      } else if (!data.registrationNumber && !data.registrationId) {
        return '暂无数据'
      }
    },
    // 弹框收货信息页码更改
    dialogHandleSizeChange (pageSize) {
      this.dialogPage.pageSize = pageSize
      this.getReciveInfo()
    },
    // 弹框切换至不同的页面
    dialogHandleCurrentChange (curPage) {
      this.dialogPage.curPage = curPage
      this.getReciveInfo()
    },
    // 关闭弹框重置一切数据
    closeDialog () {
      this.dialogPopupVisible = false
      this.dialogReciveGetOne = []
      this.dialogReceiveDetailId = ''
    },
    // tab切换
    tabsHandle (index) {
      this.activeIndex = index
    },
    // 点击返回
    back () {
      this.$router.go(-1)
    },
    // 收货信息页码更改
    reciveHandleSizeChange ($event, index) {
      this.pageList[index].pageSize = $event
      this.getReciveInfoById(index)
    },
    // 收货信息切换不一样的页面,重置一切数据
    reciveHandleCurrentChange ($event, index) {
      this.pageList[index].curPage = $event
      this.getReciveInfoById(index)
    },
    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.getOrderInfo()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getOrderInfo()
    }
  }
}
</script>

<style lang="less">
.partDetailsBoxs {
  height: 100%;
  .partDetails {
    display: flex;
    height: 100%;
    overflow: auto;
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      // padding-right: 0;
    }
  }
  .center-table {
    margin-top: 46px;
  }
  .order-list-info {
    padding-left: 16px;
    height: 30px;
    line-height: 30px;
    span {
      margin-right: 30px;
      font-size: 14px;
      span {
        padding: 0 8px;
        color: black;
        font-size: 14px;
      }
      .add-color {
        color: blue;
      }
      .add-price {
        color: red;
      }
    }
  }
}
</style>
